<template>
	<view class="content">
		<scroll-view scroll-y="true" class="scroll-view" :scroll-into-view="scrollinto">
			<view v-for="(item,index) in chats" :key="index" class="chat-item">
				<view class="ai-content fs-26 color-808080" v-if="item.type == 'ai'">
					<!-- <vue-typed-js :strings="['我正在努力思考中......',item.content]" :showCursor="false"> -->
					<view class="typing" v-html="item.content"></view>
					<!-- </vue-typed-js> -->
					<image class="AI-img" src="../../static/aiquestion/man-02-top@3x.png" mode="aspectFill"></image>
					<view class="AI-txt">
						小助手
					</view>
					<view class="AI-options flex-center gap-30">
						<view class="option flex-center fs-26" @click="checkLogin()&&continuesubmit()"
							v-if="item.showOptions&&(index == (chats.length-1)) && index">
							继续
						</view>
						<view class="option  flex-center fs-26" v-if="item.showOptions&&index" @click="copychat(index)">
							复制
						</view>
					</view>
				</view>
				<view class="user-content flex-center" v-if="item.type == 'user'">
					<view class="flex-1 fs-28 color-333333">
						{{item.content}}
					</view>
					<image src="../../static/avatar.png" mode=""></image>
				</view>
			</view>
			<view :id="'scroll'+chats.length" v-if="chats.length>1" style="height: 98upx;"></view>
		</scroll-view>
		<view class="dialogue flex-center">
			<view class="flex-1">
				<input class="fs-26" v-model="input" placeholder="请输入内容......"></input>
			</view>
			<view class="submit flex-center" @click="checkLogin()&&submit()">
				发送
			</view>
		</view>

		<view class="clear-chat flex-center" @click="clear">
			清空对话
		</view>
		<view style="position: relative;">
			<by-nike-avtar ref="login"></by-nike-avtar>
		</view>
	</view>
</template>

<script>
	import {
		putQuestionsTo
	} from '../../API/aichat.js'
	let updater = '';
	export default {
		data() {
			return {
				input: '', //我想以科技发展生成一段文案
				chats: [{
					type: 'ai',
					content: ''
				}],
				bottomHeight: '10px',
				scrollinto: '',
				function_id: 1
			}
		},
		async mounted() {

		},
		onShow() {
			this.init();
		},
		methods: {
			init() {

				let _this = this;
				let pages = getCurrentPages();
				let options = (pages[pages.length - 1]).options;
				if (options.function_id) {
					this.function_id = options.function_id;
				}
				if (options.title) {
					console.log(options.title)
					setTimeout(() => {
						uni.setNavigationBarTitle({
							title: options.title
						})
					}, 200)
				}
				if (options.template) {
					_this.updateText(uni.getStorageSync('chattemplate'), 0);
				} else {
					_this.updateText('请输入您需要问的问题，小助手将会根据你的问题进行回答，例如：我现在很难过，希望能够得到安慰。', 0);
				}
			},
			updateText(content, i) {
				var _this = this;
				var temp = ""; //临时显示文本
				var index = 0; //初始下标为0
				if(updater)clearTimeout(updater);
				updater = setInterval(function() {
					if (temp.length < content.length) { //如果比原始文本短
						temp += content[index] //就往临时显示文本添加一个字符
						index = index + 1; //下标+1
					} else { //清除定时器
						_this.$set(_this.chats[i], 'showOptions', true);
						_this.$set(_this.$data, 'scrollinto', 'scroll' + _this.chats.length);
						clearTimeout(updater);
					}
					_this.chats[i].content = temp //将临时显示文本赋值到显示文本

				}, 100);
			},
			async submit() {
				if (this.input == '') {
					return;
				}
				let content = this.input;
				this.chats.push({
					type: 'user',
					content
				})
				this.chats.push({
					type: 'ai',
					content: '我正在努力思考中......'
				});
				
				this.input = '';
				let data = await putQuestionsTo({
					function_id: this.function_id,
					content
				});
				console.log(data);
				this.updateText(data.content, this.chats.length - 1);
			},
			continuesubmit() {
				this.input = '继续';
				this.submit();
			},
			copychat(i) {
				let data = this.chats[i].content.replace(/<br\/>/g, '\n')
				uni.setClipboardData({
					data,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: "none"
						});
					},
					fail: function() {
						uni.showToast({
							title: '复制失败',
							icon: "none"
						});
					}
				});
			},
			clear() {
				this.input = ''; //我想以科技发展生成一段文案
				this.chats = [{
					type: 'ai',
					content: ''
				}];
				this.scrollinto = '';
				this.init();
			}
		}
	}
</script>

<style scoped>
	.clear-chat {
		position: fixed;
		right: 50upx;
		bottom: calc(148upx + var(--window-bottom));

		height: 50upx;
		padding: 0 18upx;
		border: 1px solid #3E80E5;
		/* background: #fff; */
		color: #3E80E5;
		font-size: 22upx;
		border-radius: 30px;
	}
	body {
		overflow: hidden;
	}

	.content {
		background: linear-gradient(0deg, #CDF1F7, #BCDFFD, #CFDBFF);
		height: calc(100vh - var(--window-bottom));
		overflow: hidden;
	}

	.scroll-view {
		height: calc(100vh - 98upx - var(--window-bottom));
	}

	.chat-item {
		min-height: 50upx;
		width: 690upx;
		margin: 0 auto;
		margin-top: 60upx;
		box-sizing: border-box;
		background-color: #e5edff;
		border-radius: 30upx;
		/* padding: 35upx; */
	}

	.ai-content {
		padding: 40upx 57upx 83upx 89upx;
		position: relative;
	}

	.AI-img {
		position: absolute;
		bottom: -28upx;
		left: 0;
		width: 98upx;
		height: 128upx;
	}

	.AI-txt {
		position: absolute;
		bottom: 17upx;
		left: 99upx;
		font-size: 32upx;
		font-weight: 400;
		color: #3E80E5;

	}

	.AI-options {
		position: absolute;
		bottom: 14upx;
		right: 21upx;
	}

	.AI-options .option {
		height: 60upx;
		padding: 0 34upx;
		border: 1px solid #9887FF;
		color: #9887FF;
		border-radius: 30px;
	}

	.user-content {
		padding: 20upx 20upx 20upx 40upx;
	}

	.user-content image {
		width: 100upx;
		height: 100upx;
		border-radius: 50upx;
	}


	.dialogue {
		position: fixed;
		left: 0;
		bottom: calc(var(--window-bottom));
		margin: 22upx 30upx;
		padding-right: 16upx;
		width: 690upx;
		height: 98upx;
		border-radius: 49upx;
		background-color: #dcfdff;
		box-sizing: border-box;
	}

	.dialogue input {
		padding: 46upx 40upx 46upx 72upx;
		/* padding-bottom: calc(var(--bottomHeight) + 46upx); */
	}

	.submit {
		height: 60upx;
		padding: 0 34upx;
		border: 1px solid #3E80E5;
		background: #3E80E5;
		color: #fff;
		border-radius: 30px;
	}

	/* ------- */
	.color-808080 {
		color: #808080;
	}

	.color-333333 {
		color: #333333;
	}

	.flex {
		display: flex;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.flex-1 {
		flex: 1;
	}

	.align-center {
		align-items: center;
	}

	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.gap-30 {
		gap: 30upx;
	}

	.fs-32 {
		font-size: 32upx;
	}

	.fs-40 {
		font-size: 40upx;
	}

	.fs-28 {
		font-size: 28upx;
	}

	.fs-26 {
		font-size: 26upx;
	}
</style>